<template>
	<view class="y-flex y-flex-1">
		<template v-if="pageStyle.enableNavigationTransparent">
			<com-status-bar></com-status-bar>
			<com-gap height="100"></com-gap>
		</template>
		<search-input v-if="enableSearch" v-model="keyword" @confirm="handleConfirm" :marginGap="pageStyle.pageMarginGap"></search-input>
		<com-tabs-list
		:current="subsectionSelectedIndex"
		:column="subsectionColumn"
		:bg-color="subsectionBackgroundColor"
		:text-color="skinColor.color_1"
		:border-color="skinColor.color_gap_1"
		:selected-color="subsectionSelectedColor"
		:enable-swiper="enableSwiper"
		:tabsShow="subsection.length > 1"
		:data="subsection"
		@change="handleTabsChange">
			<template v-slot="{swiper, i}">
				<module-list :ref="'list' + i"
				:data="swiper.components"
				:cell="swiper.cell"
				:bounce="swiper.style.enableBounce"
				:back-top-show="swiper.style.enableBackTop"
				:refreshImage="swiper.style.pulldownRefreshImage"
				:pulldownable="swiper.style.enablePulldown == 1"
				:loadmoreable="swiper.style.enableLoadmore == 1"
				:backTopImage="swiper.style.backTopImage"
				:loadingColor="swiper.style.loadingColor"
				:params="moduleParams"
				:marginGap="pageMarginGap"
				:showTopGap="pageStyle.enableTopGap == 1"
				@scroll="handleScroll"
				@pulldown="handlePulldown(i, $event)">
				</module-list>
			</template>
		</com-tabs-list>
	</view>
</template>

<script>
	import SearchInput from './components/SearchInput.vue'
	import ModuleList from './components/ModuleList.vue'
	export default {
		inject: ['getPage', 'getPageStyle', 'getSkinColor', 'getQuery', 'getSkinMode'],
		components: {
			SearchInput,
			ModuleList
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			skinMode () {
				return this.getSkinMode()
			},
			//获取路由参数
			query () {
				return this.getQuery()
			},
			app () {
				return getApp().globalData
			},
			page () {
				return this.getPage()
			},
			pageStyle () {
				return this.getPageStyle()
			},
			network () {
				return this.$store.getters['network/GET']
			},
			//选项栏栏数
			subsectionColumn () {
				return this.pageStyle.subsectionColumn || 'auto'
			},
			//选项栏背景色
			subsectionBackgroundColor () {
				return this.pageStyle.subsectionBackgroundColor || this.skinColor.color_bg_1
			},
			//选项栏选中高亮色
			subsectionSelectedColor () {
				return this.pageStyle.subsectionSelectedColor || this.pageStyle.themeColor || this.skinColor.color_blue
			},
			//开启左右滑动
			enableSwiper () {
				return this.pageStyle.enableSwiper || false
			},
			//开启搜索
			enableSearch () {
				return this.pageStyle.enableSearch || false
			},
			moduleParams () {
				return Object.assign({}, this.query, {keyword: this.keyword})
			}
		},
		data () {
			return {
				subsection: [],//选项栏数据
				subsectionSelectedIndex: 0,//选项栏选中索引
				keyword: ''//搜索关键词
			}
		},
		mounted() {
			this.keyword = this.query.keyword || ''
			this.$nextTick(function () {
				this.handleGetSubsection()
			})
		},
		methods: {
			handleScroll (e) {
				this.$emit('scroll', Math.abs(e.contentOffset.y))
			},
			handleConfirm () {
				if ( !this.keyword ) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
					return
				}
				this.handlePulldown(this.subsectionSelectedIndex)
			},
			async handlePulldown (key, callback) {
				this.$refs['list' + key] && this.$refs['list' + key].initModule(callback, callback || !this.enableSwiper)
			},
			async handleGetSubsection () {
				this.subsectionSelectedIndex = this.query.selected || 0
				const subsection = this.page?.subsection || []
				this.subsection = subsection.map(s => Object.assign({}, s, {style: Object.assign({}, this.pageStyle, s.style, this.skinMode == 'night' ? {} : (s.darkStyle || {}))}))
				this.$nextTick(function () {
					setTimeout(() => {
						this.$emit('loaded', true)
						this.handlePulldown(this.subsectionSelectedIndex)
					}, 100)
				})
			},
			handleTabsChange (e) {
				if ( this.changeTimer ) {
					clearTimeout(this.changeTimer)
					this.changeTimer = null
				}
				this.subsectionSelectedIndex = e.current
				this.$nextTick(function () {
					const key = this.subsectionSelectedIndex
					this.changeTimer = setTimeout(() => {
						this.handlePulldown(key)
					}, 300)
				})
			}
		}
	}
</script>

<style>
</style>